<template>
	<scroll-view @scrolltolower="handleTolower" class="recomment_view" scroll-y v-if="recomments.length>0">
		<!-- 推荐 开始 -->
		<view class="recomment_wrap">
			<view class="recomment_item" v-for="(item,index) in recomments" :key="item.id">
				<go-detail :list="recomments" :index="index">
					<template v-slot:footer>
						<image mode="widthFix" :src="item.thumb"></image>
					</template>
				</go-detail>
			</view>
		</view>
		<!-- 推荐 结束 -->
		
		<!-- 月份 开始-->
		<view class="mouth_wrap">
			<view class="mouth_title">
				<view class="mouth_title_info">
					<view class="mouth_info">
						<text>{{mouth.DD}} /</text>{{mouth.MM}} 月
					</view>
					<view class="mouth_text">{{mouth.title}}</view>
				</view>
				<view class="mouth_title_more"> 更多 ></view>
			</view>
			<view class="mouth_content">
				<view class="mouth_item" v-for="(item,index) in mouth.items" :key="item.id">
					<go-detail :list="mouth.items" :index="index">
						<template v-slot:footer>
							<image class="mouth_pic" :src="item.thumb + item.rule.replace('$<Height>',360)" mode="aspectFill"></image>
						</template>
					</go-detail>
				</view>
			</view>
		</view>
		<!-- 月份 结束 -->
		
		<!-- 热门 开始 -->
		<view class="hot_wrap">
			<view class="hot_title">
				<text> 热门 </text>
			</view>
			<view class="hot_content mouth_content">
				<view class="mouth_item" v-for="(item,index) in hot.value" :key="item.id">
					<go-detail :list="hot.value" :index="index">
						<template v-slot:footer>
							<image :src="item.thumb" mode="heightFix"></image>
						</template>
					</go-detail>
				</view>
			</view>
		</view>
		<!-- 热门 结束 -->
	</scroll-view>
</template>

<script setup lang="ts">
	import moment from "moment"
	import {onMounted , ref ,readonly , reactive} from 'vue';
	import axios from '../../../utils/request.js';
	import {goDetail}from '../../../components/goDetail.vue'
	let recomments = ref([]);
	let mouth = reactive({});
	let hot = reactive([]);
	let params = reactive({
		limit:30,
		order: "hot",
		skip : 0
	})
	let hasMore = true
	onMounted(()=>{
		getList()
	})
	
	const getList = () => {
		axios({
			methods:'get',
			url:'v3/homepage/vertical',
			params:params,
		}).then(res =>{
			if(res.res.vertical === 0){
				hasMore = false;
				return;
			}
			console.log(res)
			if(params.skip === 0){
				recomments.value = res.res.homepage[1].items;  // 小编精选,推荐列表
				let m = res.res.homepage[2];
				mouth.MM=moment(m.stime).format("MM");
				mouth.DD=moment(m.stime).format("DD");
				mouth.title = m.title;
				mouth.items = m.items;
				// console.log(mouth)
				// 获取热门数据列表
				hot.value = res.res.vertical
			}else{
				hot.value = [...hot.value , ...res.res.vertical]
			}
			
			
			
			
			console.log(hot)
		}).catch(err =>{
			console.log(err)
		})
	}
	const handleTolower = () => {
		console.log("到底了");
		if(hasMore){
			params.skip+=params.limit;
			getList();
		}else{
			uni.showToast({
				title:'没有更多了',
				duration:3000
			})
		}
		
	}
</script>

<style scoped>
	.recomment_view{
		height:calc(100vh - 40px);
	}
	.recomment_wrap{
		display: flex;
		flex-wrap: wrap;
	}
	
	.recomment_item{
		width: 50%;
		border: 3rpx solid #fff;
	}

.mouth_wrap {
    
}
.mouth_content{
	display: flex;
	flex-wrap: wrap;
}
.mouth_item{
	width: 33.33%;
	border: 3rpx solid #fff;
}

.mouth_title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
}

.mouth_title_info {
	display: flex;
}

.mouth_info {
	color: #d52a7e;
	font-size: 30rpx;
	font-weight: 600;
}
.mouth_info > text {
	color: #d52a7e;
	font-size: 34rpx;
	font-weight: 600;
}
.mouth_text {
	margin-left: 20rpx;
	font-size: 32rpx;
	font-weight: 600;
	color:#666
}
	  
.mouth_title_more {
	font-szie:24rpx;
	color:#d52a7e;
}
	
.hot_title{
	padding: 20rpx;
	
}
.hot_title>text{
	border-left: 10rpx solid #d52a7e;
	font-size: 34rpx;
	font-weight: 600;
	padding-left: 20rpx;
	letter-spacing: 2px;
}
</style>
